<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="24"
          justify="center"
        >
          <el-col
            :span="6"
            class="ddbh"
          >
            <div class="ddbh">
              订单编号 :<label>{{ orderDetails.orderId }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ydbh">
              运单编号 :
              <label>{{ orderDetails.transportOrderId || '--' }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="xdsj">
              下单时间 : <label>{{ orderDetails.createTime || '--' }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="orderstatus"
          >
            <div class="ddzt">
              订单状态 :
              <label v-if="orderDetails.status == 23000">待取件</label>
              <label v-if="orderDetails.status == 23001">已取件</label>
              <label v-if="orderDetails.status == 23002">网点自寄</label>
              <label v-if="orderDetails.status == 23003">网点入库</label>
              <label v-if="orderDetails.status == 23004">待装车</label>
              <label v-if="orderDetails.status == 23005">运输中</label>
              <label v-if="orderDetails.status == 23008">派送中</label>
              <label v-if="orderDetails.status == 23009">已签收</label>
              <label v-if="orderDetails.status == 23010">拒收</label>
              <label v-if="orderDetails.status == 230011">已取消</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="yjddrq">
              预计到达日期 :
              <label>{{ orderDetails.estimatedArrivalTime || '--' }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!-- 基本信息 -->
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="1">
          <template slot="title">
            <div class="collapse-detail">基本信息</div>
          </template>
          <div class="block">
            <el-timeline>
              <div class="line"></div>
              <div
                class="pake-info"
                style="margin-top: 10px"
              >
                <img
                  class="img-info1"
                  src="../../assets/fahuo.png"
                  alt=""
                />
                <span>发货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    发货方姓名 :
                    <span>{{ orderDetails.senderName }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    发货方地址 :
                    <span>{{ orderDetails.senderProvince }}</span><span>{{ orderDetails.senderCity }}</span><span>{{ orderDetails.senderCounty }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    发货方电话 :
                    <span>{{ orderDetails.senderPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址 :
                    <span>{{ orderDetails.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/shouhuo.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px"
                >收货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    收货方姓名：
                    <span>{{ orderDetails.receiverName }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    收货方地址：
                    <span>{{ orderDetails.receiverProvince }}</span><span>{{ orderDetails.receiverCity }}</span><span>{{ orderDetails.receiverCounty }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    收货方电话：
                    <span>{{ orderDetails.receiverPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ orderDetails.receiverAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/juli.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px"
                >距离: <span>{{ orderDetails.juli }}</span></span>
              </div>
              <!-- 备注 -->
              <div class="pake-info-remarks">
                <span class="pake-info-remarks-text">备注：</span>
                <span class="pake-info-remarks-texts">
                  <!-- 如果没有数据显示暂无 -->
                  {{ orderDetails.remark ? orderDetails.remark : '暂无' }}
                </span>
              </div>
            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单跟踪 -->
      <el-collapse
        v-if="this.$route.query.transportOrderId"
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="2">
          <template slot="title">
            <div class="collapse-detail">订单跟踪</div>
          </template>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单轨迹 -->
      <el-collapse
        v-if="this.$route.query.transportOrderId"
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="3">
          <template slot="title">
            <div class="collapse-detail">订单轨迹</div>
          </template>
          <div id="map"></div>
        </el-collapse-item>
      </el-collapse>
      <!-- 取件信息 -->
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="4">
          <template slot="title">
            <div class="collapse-detail">取件信息</div>
          </template>
          <el-row
            :gutter="24"
            justify="center"
          >
            <el-col :span="6">
              <div class="szwd">
                所在网点 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.agencyName }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type"
            >
              <div class="qjlx">
                取件类型 :
                <label>{{ orderDetails.pickupType }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="zyzt">
                作业状态 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.zystatus }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qjkdy">
                取件快递员 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.courierName }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="kdydh">
                快递员电话 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.courierMobile }}</span>

              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type-time"
            >
              <div class="yjqjrq">
                预计取件时间 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.estimatedStartTime }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="Pickup-completed-time"
            >
              <div class="qjwcsj">
                取件完成时间 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.actualEndTime }}</span>
              </div></el-col></el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 派送信息 -->
      <el-collapse
        v-if="this.$route.query.transportOrderId"
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="5">
          <template slot="title">
            <div class="collapse-detail">派送信息</div>
          </template>
          <el-row
            :gutter="24"
            justify="center"
          >
            <el-col :span="6">
              <div class="szwd">
                所在网点 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.psagencyName }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type"
            >
              <div class="qjlx">
                作业状态 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.zystatus }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="zyzt">
                派送快递员 :
                <span style="color: #818693;font-weight: 400;"> {{ orderDetails.pscourierName }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qjkdy">
                快递员电话 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.pscourierMobile }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="kdydh">
                您预计派送时间 :
                <span style="color: #818693;font-weight: 400;"> {{ orderDetails.psestimatedStartTime }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type-time"
            >
              <div class="yjqjrq">
                派件完成时间 :
                <span style="color: #818693;font-weight: 400;">{{ orderDetails.psactualEndTime }}</span>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 拒收派件信息 -->
      <!-- <el-collapse style="margin-top: 20px; border: none">
        <el-collapse-item name="4">
          <template slot="title">
            <div class="collapse-detail">拒收派送信息</div>
          </template>
          <el-row
            :gutter="24"
            justify="center"
          >
            <el-col :span="6">
              <div class="szwd">所在网点:</div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type"
            >
              <div class="qjlxx">取件类型:</div>
            </el-col>
            <el-col :span="6">
              <div class="qjlxx">作业状态:</div>
            </el-col>
            <el-col :span="6">
              <div class="qjkdy">派送快递员:</div>
            </el-col>
            <el-col :span="6">
              <div class="kdydh">快递员电话:</div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type-time"
            >
              <div class="sjpjsj">预计派件时间:</div>
            </el-col>
            <el-col
              :span="6"
            >
              <div class="sjpjsj">实际派件时间:</div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse> -->

      <!-- 费用信息 -->
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="6">
          <template slot="title">
            <div class="collapse-detail">费用信息</div>
          </template>
          <div class="const-content">
            <el-col :span="6">
              <div class="zffs">
                运费 :
                <span
                  style="font-size: 18px; color: #ffb302; margin-right: 10px;"
                >{{ orderDetails.amount }}</span><span style="color: #818693;font-weight: 400;">元</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="zffs">支付方式 :
                <span style="color: #818693;font-weight: 400;">{{
                  orderDetails.paymentMethod === 1 ? '预结' : '到付'
                }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="fkzt">付款状态 :
                <span style="color: #818693;font-weight: 400;">{{
                  orderDetails.paymentStatus === 1 ? '未付' : '已付'
                }}</span>
              </div>
            </el-col>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px;margin-bottom: 40px; border: none"
      >
        <el-collapse-item name="7">
          <template slot="title">
            <div class="collapse-detail">货品信息</div>
          </template>
          <el-table>
            <el-table-column label="序号"></el-table-column>
            <el-table-column label="货品名称"></el-table-column>
            <el-table-column label="货品类型"></el-table-column>
            <el-table-column label="重量(千克)"></el-table-column>
            <el-table-column label="体积(立方)"></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
export default {
  data() {
    return {
      // 订单详情
      orderDetails: {
        memberId: '', // 客户id
        id: '',
        distance: '', // 距离(单位米)
        orderCargoDTOS: '', // 货品集合
        page: '', // 页码
        pageSize: '', // 页尺寸
        orderType: '', // 订单类型
        orderId: '', //
        transportOrderId: '', //
        createTime: '', // 下单时间
        status: '', // 订单状态
        taskDispatch: '', // 派件信息
        taskPickup: '', // 取件信息
        mark: '', // 备注
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderAddress: '', //
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverAddress: '', // 收件人详情地址
        paymentMethod: '', // 付款方式
        paymentStatus: '', // 付款状态
        goodsTypeId: '', //
        goodsTypeName: '', //
        receiverProvince: '', // 收件人省份
        receiverCity: '', // 收件人市区
        receiverCounty: '', // 收件人县区
        senderProvince: '', // 发件人省份
        senderCity: '', // 发件人市区
        senderCounty: '', // 发件人县区
        amount: '', // 金额
        agencyName: '', //
        courierName: '', //
        courierMobile: '', //
        estimatedStartTime: '', // 预计取件时间
        actualEndTime: '', // 实际完成时间
        pickupType: '', // 取件类型
        zystatus: '', // 作业状态
        estimatedArrivalTime: '', // 预计到达时间
        juli: '',
        psagencyName: '',
        pscourierName: '',
        pscourierMobile: '',
        psestimatedStartTime: '',
        psactualEndTime: ''
      },
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      // 支付方式
      paymentMethodOptions: [
        {
          id: 1,
          name: '预结'
        },
        {
          id: 2,
          name: '到付'
        }
      ],
      // 付款状态
      paymentstatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ]
    }
  },
  mounted() {
    const map = new BMap.Map('map')
    const point = new BMap.Point(116.402, 39.912)
    map.centerAndZoom(point, 6)
    map.enableScrollWheelZoom()
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.pickupType = this.$route.query.status
    this.getList(this.orderId)
  },
  methods: {
    async getList(orderId) {
      const { data: res } = await orderDetail(orderId)
      console.log(res)
      this.senderAreaName = res.senderCity.name
      this.receiverAreaName = res.receiverCity.name
      this.logisticsInfo =
        res.transportOrderPointVOS == null
          ? []
          : res.transportOrderPointVOS.reverse()
      this.orderDetails.orderId = res.id
      this.orderDetails.createTime = res.createTime
      this.orderDetails.estimatedArrivalTime = res.estimatedArrivalTime
      this.orderDetails.status = res.status
      this.orderDetails.senderName = res.senderName
      this.orderDetails.senderPhone = res.senderPhone
      this.orderDetails.senderAddress = res.senderAddress
      this.orderDetails.receiverName = res.receiverName
      this.orderDetails.receiverPhone = res.receiverPhone
      this.orderDetails.receiverAddress = res.receiverAddress
      this.orderDetails.paymentMethod = res.paymentMethod
      this.orderDetails.paymentStatus = res.paymentStatus
      this.orderDetails.mark = res.mark
      this.orderDetails.juli = res.distance + 'km'

      if (res.transportOrder !== null) {
        this.orderDetails.transportOrderId = res.transportOrder.id
      }
      if (res.senderProvince !== null) {
        this.orderDetails.senderProvince = res.senderProvince.name
      }
      if (res.senderCity !== null) {
        this.orderDetails.senderCity = res.senderCity.name
      }
      if (res.senderCounty !== null) {
        this.orderDetails.senderCounty = res.senderCounty.name
      }
      if (res.senderAddress !== null) {
        this.orderDetails.senderAddress = res.senderAddress
      }
      if (res.receiverProvince !== null) {
        this.orderDetails.receiverProvince = res.receiverProvince.name
      }
      if (res.receiverCity !== null) {
        this.orderDetails.receiverCity = res.receiverCity.name
      }
      if (res.receiverCounty !== null) {
        this.orderDetails.receiverCounty = res.receiverCounty.name
      }
      // 取件信息
      if (res.taskPickup !== null) {
        this.orderDetails.agencyName = res.taskPickup.agency.name
      }
      if (res.pickupType === 1) {
        this.orderDetails.pickupType = '网点自寄'
      } else {
        this.orderDetails.pickupType = '上门取件'
      }
      if (res.taskPickup !== null) {
        if (res.taskPickup.status === 1) {
          this.orderDetails.zystatus = '新任务'
        } else if (res.taskPickup.status === 2) {
          this.orderDetails.zystatus = '已完成'
        } else if (res.taskPickup.status === 3) {
          this.orderDetails.zystatus = '已取消'
        }
      }
      if (res.taskPickup != null && res.taskPickup.courier != null) {
        this.orderDetails.courierName = res.taskPickup.courier.name
      }
      if (res.taskPickup != null && res.taskPickup.courier != null) {
        this.orderDetails.courierMobile = res.taskPickup.courier.mobile
      }
      if (res.taskPickup != null) {
        this.orderDetails.estimatedStartTime = res.taskPickup.estimatedStartTime
      }
      if (res.taskPickup != null) {
        this.orderDetails.actualEndTime = res.taskPickup.actualEndTime
      }
      // 派送信息
      if (res.taskDispatch !== null) {
        if (res.taskDispatch.agency !== null) {
          this.orderDetails.psagencyName = res.taskDispatch.agency.name
        }
        if (res.taskDispatch !== null) {
          if (res.taskDispatch.status === 1) {
            this.orderDetails.zystatus = '新任务'
          } else if (res.taskDispatch.status === 2) {
            this.orderDetails.zystatus = '已完成'
          } else if (res.taskDispatch.status === 3) {
            this.orderDetails.zystatus = '已取消'
          }
        }
        if (res.taskDispatch.courier !== null) {
          this.orderDetails.pscourierName = res.taskDispatch.courier.name
          this.orderDetails.pscourierMobile = res.taskDispatch.courier.mobile
        }
        this.orderDetails.psestimatedStartTime =
          res.taskDispatch.estimatedStartTime
        this.orderDetails.psactualEndTime = res.taskDispatch.actualEndTime
      }
      // 费用信息
      this.orderDetails.amount = res.amount
      this.orderDetails.paymentMethod = res.paymentMethod
      this.orderDetails.paymentStatus = res.paymentStatus
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#map {
  width: 100%;
  height: 900px;
}
>>>.anchorBL {
  display: none;
}
@import './index.scss';
</style>
